import { memo } from 'react';
// import { Layer, Stage } from 'react-konva';
// import LayerImageItem from './LayerImageItem';

import { CanvasSize } from './ImagePreview';
import { useStore } from '@nanostores/react';
import { $layerSrcList, $hideIndex } from '../store';
import { Image } from '@chakra-ui/react';
const LayerImages = ({ containerSize }: { containerSize: CanvasSize }) => {
  const layerSrcList = useStore($layerSrcList);
  const hideIndex = useStore($hideIndex);

  return layerSrcList.map((l, index) => (
    <Image
      key={l.color}
      src={l.src}
      maxWidth="full"
      maxHeight="full"
      height="full"
      objectFit="contain"
      position="absolute"
      display={hideIndex[index] ? 'block' : 'none'}
    />
  ));

  //   return (
  //     <Stage width={containerSize.width} height={containerSize.height}>
  //       {layerSrcList.map((l, index) => (
  //         <Layer key={l.color} visible={hideIndex[index]}>
  //           <LayerImageItem src={l.src} containerSize={containerSize} />
  //         </Layer>
  //       ))}
  //     </Stage>
  //   );
};

export default memo(LayerImages);
